* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body { 
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	background: linear-gradient(to bottom , #353b48 30%,#8c7ae6 70%) no-repeat;
}
h1 {
	color: #fff;
	text-align: center;
	letter-spacing: 3px;
	line-height: 60px;
	position: absolute;
	top: 20px;
	left: 0;
	right: 0;
	margin: 0 auto;
	text-shadow: 2px 2px #8c7ae6;
}
.container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 1100px; 
	margin: 100px auto;
} 
.container .left,.container .right {
	flex: 1;
	height: 600px;
	margin: 10px; 
	border-radius: 10px;
	background-color: white;
	padding: 10px;
}
.container .left .top {
	height: 25px;
	background: url("../images/left.png") no-repeat; 
}
.container .right .top {
	height: 30px;
	background: url("../images/right.png") no-repeat;
}
.container .left .top, .container .right .top { 
	background-size: contain;
} 
.container .left .map {
	height: calc( 100% - 25px); 
} 
.container .right .chart {
	height: calc( 100% - 30px);  
}